import React, { PureComponent } from 'react';
import { TabBar, Icon } from 'antd-mobile';
import { nav_bottom_bar, nav_bottom_bar_X, cart_link_s } from './NavBottomBar.less';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import cartsvg from '../../assets/svg/cart.svg';
import cartSelectedsvg from '../../assets/svg/cartSelected.svg';
import homesvg from '../../assets/svg/home.svg';
import homeSelected from '../../assets/svg/homeSelected.svg';
import my from '../../assets/svg/my.svg';
import mySelected from '../../assets/svg/mySelected.svg';
import fatie from '../../assets/svg/fatie.svg';
import faxian from '../../assets/svg/faxian.svg';
import faxianSelected from '../../assets/svg/faxianSelected.svg';
import goodsClass from '../../assets/svg/goodsClass.svg';
import goodsClassSelected from '../../assets/svg/goodsClassSelected.svg';

import equi from '../../utils/judgmentEquipment';
console.log(equi());

class NavBottomBar extends PureComponent {


    componentDidMount() {
        // console.log(
        //     "屏幕分辨率为："+screen.width+"*"+screen.height
        //     +"<br />"+
        //     "屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
        //     +"<br />"+
        //     "网页可见区域宽："+document.body.clientWidth
        //     +"<br />"+
        //     "网页可见区域高："+document.body.clientHeight
        //     +"<br />"+
        //     "网页可见区域宽(包括边线的宽)："+document.body.offsetWidth
        //     +"<br />"+
        //     "网页可见区域高(包括边线的宽)："+document.body.offsetHeight
        //     +"<br />"+
        //     "网页正文全文宽："+document.body.scrollWidth
        //     +"<br />"+
        //     "网页正文全文高："+document.body.scrollHeight
        //     +"<br />"+
        //     "网页被卷去的高："+document.body.scrollTop
        //     +"<br />"+
        //     "网页被卷去的左："+document.body.scrollLeft
        //     +"<br />"+
        //     "网页正文部分上："+window.screenTop
        //     +"<br />"+
        //     "网页正文部分左："+window.screenLeft
        //     +"<br />"+
        //     "屏幕分辨率的高："+window.screen.height
        //     +"<br />"+
        //     "屏幕分辨率的宽："+window.screen.width
        //     +"<br />"+
        //     "屏幕可用工作区高度："+window.screen.availHeight
        //     +"<br />"+
        //     "屏幕可用工作区宽度："+window.screen.availWidth
        // );
    }

  render() {
    const { path, dispatch } = this.props;

    return (
      <div className={equi() ? nav_bottom_bar_X : nav_bottom_bar}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff0036"
          barTintColor="white"
          hidden={false}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<Icon  type={homesvg.id}/>}
            selectedIcon={<Icon  type={homeSelected.id}/>}
            selected={path === "/"}
            // badge={1}
            onPress={() => {
              dispatch(routerRedux.push({
                  pathname: '/',
                }));
            }}
            data-seed="logId"
          />
          <TabBar.Item
            icon={<Icon  type={goodsClass.id}/>}
            selectedIcon={<Icon  type={goodsClassSelected.id}/>}
            title="分类"
            key="Koubei"
            // badge={'new'}
            selected={path === '/goodsClass'}
            onPress={() => {
              dispatch(routerRedux.push({
                  pathname: '/goodsClass',
                }));
            }}
            data-seed="logId1"
          />
            <TabBar.Item
                style={{width:"100%",height:"100%"}}
                icon={<Icon  type={faxian.id} onClick={()=>{
                    dispatch(routerRedux.push({
                        pathname: `/findIndex/${1}`,
                    }));
                }}/>}
                selectedIcon={<Icon  type={fatie.id} style={{width:"100%",height:"100%",position:"absolute",top:"-50%"}} onClick={()=>{
                    this.props.showShareActionSheet();
                }}/>}
                title={path.indexOf("/findIndex")!==-1?"":"发现"}
                key="faxian"
                // badge={'new'}
                selected={ path.indexOf("/findIndex")!==-1}
                onPress={() => {

                }}
            />
          <TabBar.Item
            icon={<Icon  type={cartsvg.id} />}
            selectedIcon={ <Icon type={cartSelectedsvg.id} /> }
            title="购物车"
            key="Friend"
            // dot
            selected={path === '/cart' }
            onPress={() => {
              dispatch(routerRedux.push({
                  pathname: '/cart',
                }));
            }}
          />
            <TabBar.Item
                icon={<Icon  type={my.id}/>}
                selectedIcon={<Icon type={mySelected.id}/>}
                title="我的"
                key="my"
                selected={path === '/my'}
                onPress={() => {
                    dispatch(routerRedux.push({
                        pathname: '/my',
                    }));
                }}
            />

        </TabBar>
      </div>

    );
  }
}

export default connect(({ app }) => ({ app }))(NavBottomBar);

/*
 * 首页底部导航
 * */
